<style lang="less" scoped="scoped">
	@gradient-color: #3788ee;
@bg-color: #f7f8fa;
@title-color:#3a3a3a;
@text-color: #7e7e7e;
@placeholder-color: #7e7e7e;
.login-vue {
  text-align: center;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: @bg-color;
  .login-container {
    width: 320px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .login-content {
      letter-spacing: 2px;
      background: #FFF;
      padding: 70px 30px 20px;
      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.06);
      border-radius: 3px;
      box-sizing: border-box;
      >div {
        margin: 30px 0;
        &.login-input {
          position: relative;
          .placeholder {
            position: absolute;
            color: @placeholder-color;
            top: 6px;
            font-size: 16px;
            transition: all .2s;
            left: 0;
            pointer-events: none;
          }
          input {
            font-size: 16px;
            padding: 8px 0;
            height: 40px;
            width: 100%;
            border: none;
            border-radius: 0;
            border-bottom: 1px solid #d3d3d3;
            box-shadow: inset 0 0 0 1000px #fff;
            outline: none;
            box-sizing: border-box;
            transition: .3s;
            font-weight: 200;
            &:focus {
              border-bottom-color: @gradient-color;
              box-shadow: inset 0 0 0 1000px #fff;
            }
          }
          input:focus + .placeholder, .placeholder.fixed{
            font-size: 13px;
            top: -16px;
          }
          input:-webkit-autofill + .placeholder {
            font-size: 13px;
            top: -16px;
          }
        }
        &.login-title {
          font-size: 30px;
          color: @title-color;
          line-height: 1;
          margin: -16px 0px 40px;
          font-weight: 200;
        }

      }
      > .buttonDiv {
        margin-top: 20px;
		margin-bottom: 10px;
        .h-btn {
		 width: 30%;
          padding: 12px 0;
          font-size: 18px;
          opacity: .8;
          border-radius: 3px;
          background: @gradient-color;
          border-color: @gradient-color;
          &:hover {
            opacity: 1;
            background: @gradient-color;
            border-color: @gradient-color;
          }
        }
      }
    }
  }
}
</style>

<template>
	<div class="login-vue">
		<div class="login-container">
			<Form ref="form" :label-width="150" :rules="rules" :model="login">
				<div class="login-content">

					<div class="login-title">系统检修管理</div>
					<div class="login-name login-input">
						<FormItem :showLabel="false" :validOnChange="true" prop="username">
							<input type="text" name="username" v-model="login.username" autocomplete="off" />
							<span class="placeholder" :class="{fixed: login.username != '' && login.username != null}">用户名</span>
						</FormItem>
					</div>
					<div class="login-password login-input">
						<FormItem :showLabel="false" :validOnChange="true" prop="password">
							<input type="password" name="password" v-model="login.password" @keyup.enter="submit" autocomplete="off" />
							<span class="placeholder" :class="{fixed: login.password != '' && login.password != null}">密码</span>
						</FormItem>	
					</div>

					<div class="buttonDiv">
						<Button color="primary" size="l" @click="submit">登录</Button>
						<Button color="primary" size="l" @click="reset">重置</Button>
						<Button color="primary" size="l" @click="register">注册</Button>
					</div>

				</div>
			</Form>
		</div>
	</div>
</template>
<script>
	import register from './register.vue'
	export default {
		data() {
			return {
				login: {
					username: '',
					password: ''
				},
				rules: {
					required: ['username', 'password'],
				}
			};
		},
		components: {},

		methods: {

			submit() {
				const that =this;
				let validResult = this.$refs.form.valid();
				if (validResult.result) {
					var formdata = new FormData();
					formdata.append("userName",that.login.username);
					formdata.append("userPwd",this.$md5(this.login.password));
					that.$axios.   post('/api'+'/login/',formdata).then(function(resp){
						console.log(resp);
							if(resp.data.msg == "success"){
									that.$Message({
									        type:'success',
									        text: `登录成功`
									      });
							let user = JSON.stringify(resp.data.data);
							sessionStorage.setItem("user",user);
							 that.$router.push("/menu");
							}else{
								that.$Message({
								        type:'error',
								        text: `登录失败`
								      });
							}
						});
				}

		
			},
			reset() {
				this.$refs.form.resetValid();
				this.login.username = ''
				this.login.password = ''
			},
			register() {
				const vm = this;
				vm.$router.push({
					name: 'register'
				});
			}
		},
		mounted() {},
	};
</script>
